import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader, Row, Col, DatePicker } from 'antd'
import campanys from '../../utils/config'
import moment from 'moment'

const RangePicker = DatePicker.RangePicker;
const RadioGroup = Radio.Group;
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      // data.address = data.address.join(' ')

      data.backPaymentPeriod && (data.backPaymentPeriod = data.backPaymentPeriod[0]),
      data.billParty && (data.billParty = data.billParty[0]),
      data.payerId && (data.payerId = data.payerId[0]),
      data.reimbursementRatio && (data.reimbursementRatio = data.reimbursementRatio[0]),
      data.operator = 'admin'
      onOk(data)
    })
  }
  //补0操作
  function getzf(num){
     if(parseInt(num) < 10){
         num = '0'+num;
     }
     return num;
   }
  function getMyDate(str){
              var oDate = new Date(str),
              oYear = oDate.getFullYear(),
              oMonth = oDate.getMonth()+1,
              oDay = oDate.getDate(),
              oHour = oDate.getHours(),
              oMin = oDate.getMinutes(),
              oSen = oDate.getSeconds(),
              oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
              return oTime;
          };
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  return (
    <Modal {...modalOpts}>
    <Form  layout="horizontal">
      <Row >
      <Col span={6}>
      <FormItem
          label="付款方"
          {...formItemLayout}
        >
          {
            getFieldDecorator('payerId', {
            initialValue: [item.payerId],

          })(
              <Cascader
               size='large'
               showSearch
               style={{marginTop:'6px'}}
               options={[
                        {value:'1',label:'上海世深'},
                        {value:'2',label:'佩雷罗贸易'},
                        {value:'3',label:'翼汇投资'},

                      ]}
                />
            )
          }
        </FormItem>

      </Col>
      <Col span={6}>
      <FormItem
          label="收款方"
          {...formItemLayout}
        >
          {
            getFieldDecorator('reimbursementRatio', {
            initialValue: [item.reimbursementRatio],
          })(
              <Cascader
               size='large'
               showSearch
               style={{marginTop:'6px'}}
               options={[
                 {value:'1',label:'佳木斯蓝海人力资源有限公司'},
                 {value:'2',label:'黑龙江省华彦人力资源有限公司'},
                 {value:'3',label:'大连蓝博人力资源有限公司'},

                      ]}
                />
            )
          }
        </FormItem>

      </Col>
      <Col span={6}>
      <FormItem
      label="账单方"
        {...formItemLayout}
      >
        {
          getFieldDecorator('billParty', {
          initialValue: [item.billParty],
        })(
            <Cascader
             size='large'
             showSearch
             style={{marginTop:'6px'}}
             options={[
               {value:'1',label:'佳木斯蓝海人力资源有限公司'},
               {value:'2',label:'黑龙江省华彦人力资源有限公司'},
               {value:'3',label:'大连蓝博人力资源有限公司'},

                    ]}
              />
          )
        }
      </FormItem>

      </Col>
      <Col span={6}>
      <FormItem
       label="回款账期"
       {...formItemLayout}
     >
       {
         getFieldDecorator('backPaymentPeriod', {
         initialValue: [item.backPaymentPeriod],
       })(
           <Cascader
            size='large'
            showSearch
            style={{marginTop:'6px'}}
            options={[
              {value:'1',label:'当月'},
              {value:'2',label:'1个月'},
              {value:'3',label:'2个月'},
              {value:'4',label:'3个月'},

                   ]}
             />
         )
       }
     </FormItem>

      </Col>
      </Row>

      <Row>
      <Col span={6}>
        <FormItem
        label="账单日"
        {...formItemLayout}>
          {
            getFieldDecorator('billDate',{
            initialValue: moment(item.billDate||new Date(),'YYYY-MM-DD')
          })(<DatePicker  style={{width:'100%'}} />)
          }
        </FormItem>
      </Col>
      <Col span={6}>
        <FormItem
        label="约定数据提交日"
        {...formItemLayout}>
          {
            getFieldDecorator('dataSubmissionDate',{
            initialValue: moment(item.dataSubmissionDate||new Date(),'YYYY-MM-DD')
          })(<DatePicker style={{width:'100%'}} />)
          }
        </FormItem>
      </Col>
      <Col span={6}>
        <FormItem
        label="约定到款日"
        {...formItemLayout}>
          {
            getFieldDecorator('toPayday',{
            initialValue: moment(item.toPayday||new Date(),'YYYY-MM-DD')
          })(<DatePicker style={{width:'100%'}} />)
          }
        </FormItem>
      </Col>
      <Col span={6}>
        <FormItem
        label="约定工资发放日"
        {...formItemLayout}>
          {
            getFieldDecorator('payDay',{
            initialValue: moment(item.payDay||new Date(),'YYYY-MM-DD')
          })(<DatePicker style={{width:'100%'}} />)
          }
        </FormItem>
      </Col>
      </Row>

      <Row>
        <Col span={6}>
          <FormItem
             label='账单信息名称'
             {...formItemLayout}
          >
            {
              getFieldDecorator('billName',{
              initialValue: item.billName,
              rules: [
              {
                required: true,
                message:'请输入账单信息名称'
              },
            ],
            })(
                <Input size='large' />
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            wrapperCol={{ span: 14 }}
            labelCol= {{ span: 8 }}
            label='社保纳入应收总额'
          >
            {
              getFieldDecorator('insuranceWageTotal', {
              initialValue: item.insuranceWageTotal,
              rules: [
              {
                required: true,
                message:'请选择！'
              },
            ],
            })(
                <RadioGroup>
                  <Radio value='1'>是</Radio>
                  <Radio value='0'>否</Radio>
                </RadioGroup>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            wrapperCol={{ span: 14 }}
            labelCol= {{ span: 8 }}
            label='工资纳入应收总额'
          >
            {
              getFieldDecorator('wageTotal', {
              initialValue: item.wageTotal,
              rules: [
              {
                required: true,
                message:'请选择！'
              },
            ],
            })(
                <RadioGroup>
                  <Radio value='1'>是</Radio>
                  <Radio value='0'>否</Radio>
                </RadioGroup>
              )
            }
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            wrapperCol={{ span: 14 }}
            labelCol= {{ span: 8 }}
            label='个税纳入应收总额'
          >
            {
              getFieldDecorator('taxesTotal', {
              initialValue: item.taxesTotal,
              rules: [
              {
                required: true,
                message:'请选择！'
              },
            ],
            })(
                <RadioGroup>
                  <Radio value='1'>是</Radio>
                  <Radio value='0'>否</Radio>
                </RadioGroup>
              )
            }
          </FormItem>
        </Col>
      </Row>

      <Row>
      <Col span={11}>
        <FormItem
          wrapperCol={{ span: 14 }}
          labelCol= {{ span: 5 }}
          label='公积金纳入应收总额'
        >
          {
            getFieldDecorator('providentFundTotal', {
            initialValue: item.providentFundTotal,
            rules: [
            {
              required: true,
              message:'请选择！'
            },
          ],
          })(
              <RadioGroup>
                <Radio value='1'>是</Radio>
                <Radio value='0'>否</Radio>
              </RadioGroup>
            )
          }
        </FormItem>
      </Col>
      </Row>

    </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
